<template>
  <div class="jubuCp" title="子组件必须先有一个统一的根才行">
    <div v-on:click="subFun()">父级组件事件测试</div>
    <div v-on:click="comsendval()">当前组件事件测试（子传父）</div>
    <div onclick="alert('native!')">原生事件测试</div>
    <div>组件传值：{}</div>
    <div class="list">测试模板：
      <div v-for="(value,key,index) of list">
        {{ key }}:{{ value }}:{{ index }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ListTemplate', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        msg: 'Marco', /* 这里是数据，一定记住数据一定要放data中然后用return返回 */
        list: {
          color: 'red',
          fontSize: '14px',
          fontWeight: 'bold'
        }
      }
    },
    created: function () {
      this.octopus.tips.debug("接收到传入组件的JSON：" + JSON.stringify(this.pdata));
      let kn = this.pdata;
      // 获取父级的父级的属性
      this.$parent.$parent.octopus.tips.debug("ListTemp is load.");
    },
    deactivated: function () {
      this.octopus.tips.debug("执行了销毁动作。");
    },
    diyyy: function () {
      this.octopus.tips.debug("执行了Diy方法。");
    },
    methods: {
      ltDetailFun() {
        console.log("执行了子组件中的方法。");
      },
      comsendval() {
        this.$emit("subsendfather", "send father data...")
        console.log("执行了子传父操作。");
        // alert(JSON.stringify(todo));
      },
      remove: function () {
        // 采用样式删除，会导致所有使用这个样式的DOM被删除。
        $(".jubuCp").remove();
      }
    },
    props: ["pdata", "subFun"]
  }
</script>


